import React, { Component } from 'react';
import { Pagination } from 'antd';
import moment from 'moment';

import RESTClient from '../../api/client.js';

import './style.css';

class Sence extends Component{
  constructor(props){
    super(props);
    this.state={
      dataSource: [],
      showDatas: [],
      total: 0,
      currentPage: 1,
      intervalId: null
    }
  }
  componentWillMount() {
    this.getSenceData();
    var intervalId = setInterval(()=>{
      this.getSenceData();
    },120000)
    this.setState({
      intervalId: intervalId
    })
  }
  getSenceData() {
    new RESTClient().XCXQuery({type: 'sence'},function(datas){
      console.log(1111,datas);
      this.setState({
        dataSource: datas,
        showDatas: datas.slice(0,10),
        total: datas.length
      })
    }.bind(this))
  }
  componentWillUnmount() {
    clearInterval(this.state.intervalId);
  }
  pageChange(value){
    var dataSource = this.state.dataSource;
    this.setState({
      currentPage: value,
      showDatas: dataSource.slice(10*(value-1),10*value),
    })
  }
  render(){
    return(
      <div className="sence-div">
        <table className="sence-table" cellSpacing="0">
          <thead>
            <tr>
              <th className="sence-th">调查时间</th>
              <th className="sence-th">设备号</th>
              <th className="sence-th">姓名</th>
              <th className="sence-th">联系电话</th>
              <th className="sence-th">评价（标签选择）</th>
              <th className="sence-th">建议</th>
            </tr>
          </thead>

          <tbody>
            {this.state.showDatas.map(function(data,index){
              return(
                <tr key={index}>
                  <td className="sence-td">{moment(data.createdAt).format("YYYY-MM-DD")||''}</td>
                  <td className="sence-td">{data.equNumber||''}</td>
                  <td className="sence-td">{data.name}{(data.gender==="male"?"先生":"女士")||''}</td>
                  <td className="sence-td">{data.phone||''}</td>
                  <td className="sence-td" style={{width:280}}>{data.tags.join(',')||'未选择'}</td>
                  <td className="sence-td" style={{width:280}}>{data.suggestion||'未填写'}</td>
                </tr>
              )
            })}
          </tbody>
        </table>
        <div className="sence-page">
          <Pagination style={{textAlign:'right'}} current={this.state.currentPage} pageSize={10}
                      total={this.state.total} onChange={current=>this.pageChange(current)} />
        </div>
      </div>
    )
  }
}

export default Sence
